<template>
    <div>
        <div style='margin:50px 0 0 50px'>
          <el-button v-if='add_office' @click='open_modal'>添加公司</el-button>
        </div>
        <!-- 判断角色，如果是管理员，展示全部，如果是普通用户，展示自己的公司并且可以修改 -->
        
        <el-col v-for="(company,index) in company_list" :key="index" :span="8" class='company_info'>
        <el-card shadow="hover">
            <p>公司名称：{{ company.office }}</p>
            <p>城市：{{ company.city }}</p>
            <p>街道：{{ company.street }}</p>
            <p>
              <img :src="get_img(company.img)" height='100px' alt="logo">
            </p>
            <el-button v-show="check_office">修改公司信息</el-button>
            <el-button v-show="delete_office">删除公司</el-button>
        </el-card>
        </el-col>
        <el-dialog title="输入公司信息" :visible.sync="dialogFormVisible">
          <el-form :model="form">
            <el-form-item label="公司名" :label-width="formLabelWidth">
              <el-input v-model="form.office" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="城市" :label-width="formLabelWidth">
              <el-select v-model="form.city" placeholder="请选择">
                <el-option-group
                  v-for="group in options"
                  :key="group.label"
                  :label="group.label">
                  <el-option
                    v-for="item in group.options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-option-group>
              </el-select>
            </el-form-item>
            <el-form-item label="街道" :label-width="formLabelWidth">
              <el-input v-model="form.street" autocomplete="off"></el-input>
            </el-form-item>
            <div style= 'float:left'>
                <el-form-item label='logo'></el-form-item>
            </div>
            <div style= 'float:left'>
                <el-upload
                    class="avatar-uploader"
                    :auto-upload="true"
                    :data='qiniuData'
                    action="http://up-z1.qiniu.com"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </div>
            <div style='clear:both'></div>
            <br  />
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submit_add">确 定</el-button>
          </div>
        </el-dialog>
    </div>
</template>

<script>
import { office_get, uptoken_get, office_post } from "../axios_api/api";
import {config,formatXml,judge_right} from '../../config.js';
export default {
  data() {
    return {
      delete_office:false,
      check_office:false,
      add_office:false,
      form:{
        office:'',
        city:'',
        street:'',
        img:''
      },
      formLabelWidth:'100',
      imageUrl:'',
      qiniuData:{             //上传图片携带的参数
          token : "",
          key : "",
      },
      options: [{
          label: '热门城市',
          options: [{
            value: '上海',
            label: '上海'
          }, {
            value: '北京',
            label: '北京'
          }]
        }, {
          label: '城市名',
          options: [{
            value: '成都',
            label: '成都'
          }, {
            value: '深圳',
            label: '深圳'
          }, {
            value: '广州',
            label: '广州'
          }, {
            value: '苏州',
            label: '苏州'
          }, {
            value: '长沙',
            label: '长沙'
          },{
            value: '武汉',
            label: '武汉'
          }, {
            value: '大连',
            label: '大连'
          }]
        }],
      dialogFormVisible: false,
      company_list: []
    };
  },
  mounted() {
    this.get_offices();
    this.get_uptoken();
    judge_right('add_office', this, 'add_office')
    judge_right('check_office', this, 'check_office')
    judge_right('delete_office', this, 'delete_office')
  },
  methods: {
    get_img(img){
      return config.qiniuurl + img
    },
    submit_add(){
      office_post(this.form).then(resp=>{
        this.$message(resp.message)
        if(resp.code==200){
          this.$router.go(0)
        }
      })
    },
    handleAvatarSuccess(res, file) {
          this.imageUrl = 'http://qakgy27pn.bkt.clouddn.com/' + this.qiniuData.key;
          this.form.img = this.qiniuData.key
      },
    // 生成uuid
      guid2() {
          function S4() {
              return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
          }
          return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
      },
    beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isPNG = file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG && !isPNG) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
        return isJPG && isLt2M;
        }
        if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
        return isJPG && isLt2M;
        }
    },
    // 打开对话框
    open_modal(){
      this.dialogFormVisible=true
      // 获取七牛云凭证
      this.get_uptoken()
    },
    // 获取七牛云凭证
    get_uptoken(){
        uptoken_get().then(res=>{
          this.qiniuData.token = res.up_token
        })
        // 生成key
        this.qiniuData.key = this.guid2()
    },
    get_offices() {
      office_get().then(resp => {
        this.company_list = resp.data;
      });
    }
  }
};
</script>

<style>
.company_info {
  margin: 40px;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
.el-transfer-panel{
    width: 400px;
}
.transfer-footer {
    margin-left: 20px;
    padding: 6px 5px;
}
</style>
